<template>
  <view class="container">
      <!-- 搜索框与邀请按钮行 -->
      <view class="search-row">
        <view class="search-box">
          <input 
            class="search-input" 
            placeholder="请输入对方昵称" 
            placeholder-class="placeholder-style"
          />
        </view>
  
        <view class="invite-container">
          <button class="invite-btn">添加好友</button>
        </view>
      </view>
  
      <!-- 好友申请列表 -->
      <view class="list-container">
        <view class="list-item" v-for="(item, index) in list" :key="index">
          <view class="user-info">
            <text class="username">张三 - LV:1</text>
            <text class="status">请求添加你为好友</text>
          </view>
          
          <view class="btn-group">
            <button class="btn agree" @tap="handleAgree">同意</button>
            <button class="btn refuse" @tap="handleRefuse">拒绝</button>
          </view>
        </view>
      </view>
    </view>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3] 
    }
  },
  methods: {
    handleAgree() {
      uni.showToast({ title: '已同意', icon: 'success' })
    },
    handleRefuse() {
      uni.showToast({ title: '已拒绝', icon: 'error' })
    }
  }
}
</script>

<style>
.search-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 15px;
}

.search-box {
  flex: 1; 
  background: #fff;
  border-radius: 15px;
  padding: 10px 15px;
  margin-bottom: 0; 
}

.invite-container {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 100px;
}

.invite-btn {
  background: #1989fa;
  color: #fff;
  height: 50px;
  line-height: 50px;
  font-size: 22px; 
  padding: 0 8px; 
  white-space: nowrap; 
}
.container {
  padding: 10px;
  background-color: #f5f5f5;
}

.search-box {
  background: #fff;
  border-radius: 15px;
  padding: 20px;
  margin-bottom: 30px;
}

.search-input {
  height: 30px;
  font-size: 18px;
}

.placeholder-style {
  color: #999;
}

.list-container {
  background: #fff;
  border-radius: 10px;
}

.list-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 18px;
  color: #333;
  margin-bottom: 10px;
}

.status {
  font-size: 18px;
  color: #666;
}

.btn-group {
  display: flex;
  gap: 2px;
}

.btn {
  width: 100%;
  height: 30px;
  line-height: 30px;
  border-radius: 10px;
  font-size: 18px;
  margin: 0;
}

.agree {
  background: #07c160;
  color: #fff;
}

.refuse {
  background: #ee0a24;
  color: #fff;
}

.invite-container {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.invite-btn {
  background: #1989fa;
  color: #fff;
  height: 30px;
  line-height: 30px;
}
</style>